import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { NavLink } from 'react-router-dom'
import { HeaderLeftWrapper, HeaderRightWrapper, HeaderWrapper } from './styled'

import headeTitles from '@/assets/data/header-lists.json'
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

interface Iprops {
  children?: ReactNode
}

const AppHeader: FC<Iprops> = () => {
  // const [currentIndex, setCurrentIndex] = useState(0)
  function showItem(item: any) {
    if (item.type === 'path') {
      return (
        <NavLink to={item.link}>
          {item.title}
          <i className="icon sprite_01"></i>
        </NavLink>
      )
    } else {
      return <a href={item.link}>{item.title}</a>
    }
  }
  // 点击选中事件
  // function ItemClickHandle(index: number) {
  //   setCurrentIndex(index)
  // }
  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
        <HeaderLeftWrapper>
          <a href="/" className="logo sprite_01">
            <h1>网易云音乐</h1>
          </a>
          <div className="title-list">
            {headeTitles.map((item) => {
              return (
                <div className="item" key={item.title}>
                  {showItem(item)}
                </div>
              )
            })}
          </div>
        </HeaderLeftWrapper>
        <HeaderRightWrapper>
          <Input
            className="search"
            placeholder="音乐/视频/歌手..."
            prefix={<SearchOutlined />}
          />
          <div className="center">创作者空间</div>
          <div className="login">登录</div>
        </HeaderRightWrapper>
      </div>
      <div className="divider"></div>
    </HeaderWrapper>
  )
}
export default memo(AppHeader)
